@extends('layouts.admin')

@section('title', '岗位管理')

@section('style')
    <link rel="stylesheet" href="{{asset('lib/zTree/v3/css/zTreeStyle/zTreeStyle.css')}}" type="text/css">
@endsection

@section('content')
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 办公 <span class="c-gray en">&gt;</span> 人事管理 <span class="c-gray en">&gt;</span> 岗位管理 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div style="position: fixed;width: 20%;top: 50px;left: 0;bottom: 0;box-sizing: border-box;border-right: 1px solid #ccc;">
        <div class="col-xs-12 col-sm-12 ml-15 mt-10">
            <div class="row cl">
                <input class="btn btn-warning radius add_station_class" style="width: 90%;height: 35px;" type="button" value="新增分类">
            </div>
            <div class="row cl">
                <ul id="station_class_tree" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div style="position: fixed;width: 80%;top: 50px;right: 0;bottom: 0;box-sizing: border-box;">
        <div class="col-xs-12 col-sm-12">
            <div class="row cl">
                <div class="mt-5 ml-10 mr-10">
                    <table id="listTable" class="table table-border table-bordered table-bg table-hover">
                        <thead>
                        <tr class="text-c">
                            <th><input type="checkbox" name="checkList"/></th>
                            <th>岗位名称</th>
                            <th>岗位分类</th>
                            <th>在职人数</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-add-station-class" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">添加岗位分类</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                </div>
                <div class="modal-body">
                    <p>
                        <input type="text" placeholder="请输入岗位分类名称" id="add_station_class_input" class="input-text radius size-M">
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary model_add_station_class_btn">保存</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-edit-station-class" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">编辑岗位分类</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                </div>
                <div class="modal-body">
                    <p>
                        <input type="text" placeholder="请输入岗位分类名称" id="edit_station_class_input" class="input-text radius size-M">
                        <input type="hidden" id="edit_station_class_hidden">
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary model_edit_station_class_btn">保存</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-add-station" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">新增岗位</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                </div>
                <div class="modal-body">
                    <p><input type="text" placeholder="请输入岗位名称" id="add_station_input" class="input-text radius size-M"></p>
                    <p>
                        <span class="select-box">
                          <select class="select" size="1" id="station_class_select">
                            @foreach($stationClasses as $stationClass)
                                  <option value="{{$stationClass->id}}">{{$stationClass->name}}</option>
                            @endforeach
                          </select>
                        </span>
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary model_add_station_btn">保存</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{asset('lib/zTree/v3/js/jquery.ztree.all-3.5.min.js')}}"></script>
    <script>
        var $MAIN={currentPage:1,select_station_class_id:"",search_time_sign:null}
        var $station_class_tree=null;
        function refresh_station_class_tree(){
            $station_class_tree.reAsyncChildNodes(null, "refresh");
        }
        $(document).ready(function(){
            var setting = {
                view: {dblClickExpand: false, showLine: true, selectedMulti: false},
                edit: {enable: true,removeTitle: "点击删除分了", renameTitle: "点击编辑分类"},
                data: {simpleData: {enable:true, idKey: "id", pIdKey: "pId", rootPId: "-1"}},
                async: {
                    enable: true,
                    url:"{{url('personnel/stationClass/tree_data')}}",
                    dataFilter: filter
                },
                callback: {
                    beforeEditName: beforeEditName,
                    beforeRemove: beforeRemove,
                    onClick:selectStationClassNode
                }
            };
            function filter(treeId, parentNode, childNodes){
                if (!childNodes) return null;
                for (var i=0, l=childNodes.length; i<l; i++) {
                    if(childNodes[i].id==0){
                        childNodes[i].open=true;
                        childNodes[i].iconOpen="{{url('lib/zTree/v3/css/zTreeStyle/img/diy/1_open.png')}}";
                        childNodes[i].iconClose="{{url('lib/zTree/v3/css/zTreeStyle/img/diy/1_close.png')}}";
                    }else{
                        childNodes[i].icon="{{url('lib/zTree/v3/css/zTreeStyle/img/diy/3.png')}}";
                    }
                    childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
                }
                return childNodes;
            }
            function beforeEditName(treeId, treeNode){
                if(treeNode.id=='0'){
                    layer_error_message('该分类不能被编辑!');
                    return false;}
                $MAIN.editStationClass(treeNode.name,treeNode.id);
                return false;
            }
            function beforeRemove(treeId, treeNode) {
                if(treeNode.id=='0'){
                    layer_error_message('该分类不能被删除!');
                    return false;}
                if(treeNode.children && treeNode.children.length>0){
                    layer_error_message('该分类还有子分类不能删除!');
                    return false;
                }
                var flag=confirm("确认删除" + treeNode.name + "分类吗？");
                if(flag){
                    $.ajax({
                        url: "{{url('personnel/stationClass/delete')}}",
                        data:{id:treeNode.id},
                        async:false,
                        dataType: 'json',
                        success: function(data){
                            if(data['successFlag']==1){
                                layer_success_message('删除成功!');
                            }else{
                                layer_error_message("删除失败:"+data['msg']);
                                flag=false;
                            }
                        },
                        error:function(data) {
                            layer_error_message('删除失败!');
                            flag=false;
                        },
                    });
                }
                return flag;

            }
            function selectStationClassNode(event, treeId, treeNode) {
                var selectNodeId=treeNode.id;
                if(treeNode.id=='0'){selectNodeId="";}
                if(selectNodeId==$MAIN.select_station_class_id){return;}
                $MAIN.select_station_class_id=selectNodeId;
                $MAIN.searchOnStationClassSelect();

            };
            $station_class_tree=$.fn.zTree.init($("#station_class_tree"), setting);

            $(".add_station_class").click(function(){
                $MAIN.addStationClass();
            })
        });

        $(".model_add_station_class_btn").click(function(){
            $.ajax({
                url: "{{url('personnel/stationClass/add')}}",
                data:{name:$.trim($("#add_station_class_input").val())},
                type:'post',
                dataType: 'json',
                success: function(data){
                    if(data['successFlag']==1){
                        layer_success_message('添加成功!');
                        window.location.reload();
                    }else{
                        layer_error_message(data['msg']);
                    }
                },
                error:function(data) {
                    layer_error_message('添加失败!');
                },
            });
        });
        $(".model_edit_station_class_btn").click(function(){
            $.ajax({
                url: "{{url('personnel/stationClass/edit')}}",
                data:{name:$.trim($("#edit_station_class_input").val()),id:$("#edit_station_class_hidden").val()},
                type:'post',
                dataType: 'json',
                success: function(data){
                    if(data['successFlag']==1){
                        layer_success_message('编辑成功!');
                        window.location.reload();
                    }else{
                        layer_error_message(data['msg']);
                    }
                },
                error:function(data) {
                    layer_error_message('编辑失败!');
                },
            });
        });
        $MAIN.addStationClass=function(){
            $("#add_station_class_input").val("");
            $("#modal-add-station-class").modal("show");
        }

        $MAIN.editStationClass=function(name,id){
            $("#edit_station_class_hidden").val(id);
            $("#edit_station_class_input").val(name);
            $("#modal-edit-station-class").modal("show");
        }
    </script>
    <script>
        var $dataTable=null;
        $(function(){
            $dataTable=$('#listTable').dataTable({
                "sPaginationType" : "full_numbers",
                "processing": true,
                "serverSide": true,
                "searching": false,
                "dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',
                "ajax":{
                    "url":"{{url('personnel/station/list')}}",
                    "type": 'post',
                    "data": function ( d ) {
                        d.name= $("#query_name").val();
                        d.station_class_id=$MAIN.select_station_class_id;
                        d.page=$MAIN.currentPage;
                    },
                    'dataSrc':function(result){
                        var datas=result.data;
                        if(datas){
                            for(var i=0;i<datas.length;i++){
                                datas[i].DT_RowClass='text-c';
                            }
                        }
                        return datas;
                    }
                },
                "columnDefs": [{
                    "targets": "_all",
                    "searchable":false
                },{
                    "targets": [0,-1],
                    "orderable":false
                }],
                "columns": [
                    {
                        "data": "id",
                        "render": function (data, type, row, meta) {
                            return '<input type="checkbox"  name="checkList" class="checkchild"  value="' + data + '" />';
                        }
                    },
                    { "data": "name"},
                    { "data": "station_class_name"},
                    { "data": "user_count"},
                    { "data": "created_at"},
                    { "data": "id","class":"f-14","render": function (data, type, row, meta) {
                        return '<a title="编辑" href="javascript:;" data-id="'+data+'" data-name="'+row['name']+'" class="ml-5 editBtn" style="text-decoration:none"><i class="Hui-iconfont">&#xe6df;</i></a>' +
                                '<a title="删除" href="javascript:;" data-id="'+data+'" class="ml-5 delBtn" style="text-decoration:none"><i class="Hui-iconfont">&#xe6e2;</i></a>';
                    }},
                ],
                drawCallback: function( settings ) {
                    $('input[name=checkList]')[0].checked=false;
                },
                "initComplete":function(settings, json){
                    var topPlugin='<button class="btn btn-danger radius delSelectBtn"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</button> ' +
                                  '<button class="btn btn-primary radius addBtn" ><i class="Hui-iconfont">&#xe600;</i>新增岗位</button>'+
                                  '&nbsp;<input type="text" class="input-text radius size-M" id="query_name" style="width: 200px;" placeholder="输入岗位名称查询">'+
                                  '&nbsp; <button type="button" class="btn btn-success radius btnSearch"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>'
                    $("#topPlugin").append(topPlugin);
                }
            });
            $dataTable.on( 'page.dt', function () {
                var info = $dataTable.api();
                $MAIN.currentPage=parseInt(info.page())+1;
            } );
        });

        $MAIN.searchOnStationClassSelect=function(){
            if($MAIN.search_time_sign!=null){clearTimeout($MAIN.search_time_sign)}
            $MAIN.search_time_sign=setTimeout(function(){$MAIN.search();},500);
        }
        $MAIN.search=function(){
            $dataTable.api().ajax.reload();
        }
        $MAIN.getSelectCheckBoxValue=function(){
            var theArray=[];
            $("input[name=checkList]:checked").each(function() {
                theArray.push($(this).val());
            });
            return theArray;
        }
        $MAIN.deleteData=function(ids){
            layer.confirm('确定要删除选择的岗位吗？',{
                    btn: ['确定','取消'],
                    shade: false,
                    closeBtn: 0
                },
                function(){
                    $.ajax({
                        url: "{{url('personnel/station/delete')}}",
                        data:{ids:ids},
                        dataType: 'json',
                        success: function(data){
                            if(data['successFlag']==1){
                                layer_success_message('删除成功!');
                                $MAIN.search();
                            }else{
                                layer_error_message(data['msg']);
                            }
                        },
                        error:function(data) {
                            layer_error_message('删除失败!');
                        },
                    });
                });
        }

        $(function(){

            $(".model_add_station_btn").click(function(){
                $.ajax({
                    url: "{{url('personnel/station/add')}}",
                    data:{name:$.trim($("#add_station_input").val()),station_class_id:$("#station_class_select").val()},
                    type:'post',
                    dataType: 'json',
                    success: function(data){
                        if(data['successFlag']==1){
                            layer_success_message('添加成功!');
                            $MAIN.search();
                            $("#modal-add-station").modal("hide");
                        }else{
                            layer_error_message(data['msg']);
                        }
                    },
                    error:function(data) {
                        layer_error_message('添加失败!');
                    },
                });
            });
            $(document).on("click",".btnSearch",function(){
                $MAIN.search();
            });

            $(document).on("click",".addBtn",function(){
                $("#add_station_input").val("");
                $("#modal-add-station").modal("show");
            });
            $(document).on("click",".delSelectBtn",function(){
                var ids=$MAIN.getSelectCheckBoxValue();
                if(ids.length<=0){
                    layer.msg('请选择需要删除岗位', {icon:5,time:1000});
                }else{
                    $MAIN.deleteData(ids);
                }
            });
            $(document).on("click",".editBtn",function(){
               layer_full_show("编辑'"+$(this).data("name")+"'岗位","{{url('personnel/station/edit')}}?id="+$(this).data("id"));
            });
            $(document).on("click",".delBtn",function(){
                $MAIN.deleteData([$(this).data("id")]);
            });
        })
    </script>
@endsection